<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('请求日志列表')"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="mocklog-form">
                <input type="hidden" name="params[from]" th:value="${from}">
                <div class="select-list">
                    <ul>
                        <li class="hitUrlArea" th:style="${from != 'url' ? '' : 'display:none'}">
                            <label>命中URL： </label><input type="text" name="hitUrl" th:value="${requestUrl}"/>
                        </li>
                        <li>
                            <label>请求IP： </label><input type="text" name="requestIp"/>
                        </li>
                        <li>
                            请求方式：<select name="requestMethod" th:with="type=${@dict.getType('http_method')}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                        </li>
                        <li class="select-time">
                            <label>请求时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-danger" onclick="$.operate.clean()">
                <i class="fa fa-trash"></i> 清空
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
		var fromPage = [[${from}]];
		var prefix = ctx + "system/log";

		$(function() {
		    var options = {
		        url: prefix + "/list",
		        cleanUrl: prefix + "/clean",
		        detailUrl: prefix + "/{id}",
		        uniqueId: "logId",
		        cleanUrl: prefix,
		        exportUrl: prefix + "/export",
		        modalName: "请求日志",
		        escape: true,
		        showPageGo: true,
		        rememberSelected: true,
		        columns: [
		        {
		            field: 'hitUrl',
		            title: '命中URL'
		        },
		        {
		            field: 'requestIp',
		            title: '请求IP'
		        },
		        {
		            field: 'requestMethod',
		            title: '请求方式'
		        },
		        {
		            field: 'createTime',
		            title: '请求时间',
		            formatter: function (value, row, index) {
                        return $.date(value);
                    }
		        },
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		                var actions = [];
		                actions.push(`<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="requestDetail('${row.logId}')"><i class="fa fa-tasks"></i>&nbsp;请求详细</a> `);
                        actions.push(`<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="responseDetail('${row.logId}')"><i class="fa fa-tasks"></i>&nbsp;响应详细</a> `);
		                return actions.join('');
		            }
		        }]
		    };
		    // from url page
		    if(fromPage === "url") {
		        // url页过来的 直接过滤url，而且不用展示url
                options.columns.shift();
                options.queryParams = options.queryParams || {};
                options.queryParams.hitUrl = $('[name="hitUrl"]').val();
                options.queryParams.params = {};
                options.queryParams.params.from = fromPage;
		    }
		    $.table.init(options);
		});
		
		function searchPre() {
		    var data = {};
		    $.table.search('mocklog-form', 'bootstrap-table', data);
		}
		
		function resetPre() {
			$.form.reset();
			$("#businessTypes").selectpicker('refresh');
		}

        function requestDetail(logId){
            $.modal.openWithoutYes("请求详情", prefix + `/request/${logId}`);
        }
        function responseDetail(logId){
             $.modal.openWithoutYes("响应详情", prefix + `/response/${logId}`);
        }






</script>
</body>
</html>